<template>
  <div class="area-box">
    <div id="area-card"></div>
  </div>
</template>

<script>
let echarts = require('./js/echarts.js');
export default {
  props: {
    areaData: {
      type: null,
      default: () => []
    },
  },
  data() {
    return {
      dataList:[]
    };
  },
  watch: {
    areaData(newVal,oldVal){
      this.initEcharts();
    }
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      let dataList = JSON.parse(JSON.stringify(this.areaData));
      dataList = dataList.sort((a, b) => {
        return a.value - b.value;
      });
      let yData = dataList.map(item => item.name);
      let xData = dataList.map(item => item.value);
      if (!document.getElementById("area-card")) {
        return;
      }
      let $echartsDOM = document.getElementById("area-card");
      let myEcharts = echarts.init($echartsDOM);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0',
          right: '4%',
          bottom: '0%',
          top: '0%',
          containLabel: true,
          // height: "150%",
        },
        dataZoom: [
          //Y轴滑动条
          {
            type: "slider", //滑动条
            show: dataList.length > 20 ? true : false, //开启
            yAxisIndex: [0],
            left: "93%", //滑动条位置
            start: 100, //初始化时，滑动条宽度开始标度
            end: dataList.length > 20 ? 30 : 0  //初始化时，滑动条宽度结束标度
          },
          //y轴内置滑动
          // {
          //   type: "inside", //内置滑动，随鼠标滚轮展示
          //   yAxisIndex: [0],
          //   start: 1, //初始化时，滑动条宽度开始标度
          //   end: 50, //初始化时，滑动条宽度结束标度
          //   zoomOnMouseWheel: false, //滚轮是否触发缩放
          //   moveOnMouseMove: false, //鼠标滚轮是否触发滚动
          //   moveOnMouseWheel: false
          // }
        ],
        xAxis: {
          axisLine:{     //x轴坐标轴
            show:false
          },
          axisLabel:{
            show: false
          },
          splitLine: {
            show: false
          },
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "white",//Y轴内容文字颜色
            },
          },
          axisLine:{
            show:false
          },
          axisTick: {
            show:false,
            alignWithLabel: true,
          },
          type: 'category',
          data: yData,
        },
        series: [
          {
            type: 'bar',
            data: xData,
            barWidth : 12,//柱图宽度
            itemStyle:{
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#001141",
                  },
                  {
                    offset: 0.2,
                    color: "#003059",
                  },
                  {
                    offset: 0.4,
                    color: "#006181",
                  },
                  {
                    offset: 0.6,
                    color: "#0090a7",
                  },
                  {
                    offset: 0.8,
                    color: "#00d0da",
                  },
                  {
                    offset: 1,
                    color: "#00f2f5",
                  },
                ]),
                barBorderRadius:[0, 10, 10, 0]
              }
            },
          },
        ]
      };
      myEcharts.setOption(option, true);
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@media (min-height: 980px) {
  #area-card {
    height: 60vh !important;
  }
}

@media screen and (max-height: 852px) {
  #area-card {
    height: 52vh !important;
  }
}

@media screen and (max-height: 720px) {
  #area-card {
    height: 65vh !important;
  }
}

.area-box {
  position: absolute;

  #area-card {
    // width: 280px;
    // height: 440px;
    margin: 0 20px 0 0;
    height: 58vh;
    position: relative;
    top: -12%;
  }
}

</style>
